<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<form action="">
    用户名：<input type="text" name="userName" id="userName" pattern="^[\u4e00-\u9fa5]{2,}$" /><br/><br/>
    手机号：<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$" /><br/><br/>
    <input type="submit" value="提交"/>
</form>

<script>
    var userName = document.getElementById('userName');
    var userPhone = document.getElementById('userPhone');
    //oninput:当内容改变的时候触发事件
    userName.oninput = function(){
        //console.log( 'oninput： ' + this.value );
    };
    //onkeyup:当键盘弹起是触发事件
    userName.onkeyup = function(event){
        //console.log( 'onkeyup: ' + event.keyCode );
    };
    //oninvalid:验证不通过时触发事件
    userName.oninvalid = function(){
        this.setCustomValidity( '请输入中文名字' );
    };

</script>

</body>
</html>